<template>
  <div class="company-position-container">
    <van-sticky>
      <div class="top-box">
        <!-- 头部 -->
        <van-nav-bar :border="false" @click-left="$router.go(-1)">
          <template #left>
            <van-icon
              @click="$router.push(`/company/detail${this.id}`)"
              name="arrow-left"
            />
          </template>
          <template #title>
            <span class="custom-title"
              >在招职位
              <span class="num">{{ total }}</span>
            </span>
          </template>
        </van-nav-bar>
        <!-- 图标按钮 -->
        <div class="scroll-wrap">
          <div class="content">
            <van-tag
              @click="type = undefined"
              :type="type === undefined ? 'primary' : ''"
              round
              >全部</van-tag
            >
            <!-- 通过循环来生服务器生成的标签 -->
            <van-tag
              @click="type = item.text"
              :type="type === item.text ? 'primary' : ''"
              v-for="item in filter.types"
              :key="item.id"
              round
              >{{ item.text }}</van-tag
            >
          </div>
        </div>
        <!-- 菜单栏 -->
        <van-dropdown-menu>
          <van-dropdown-item
            title="城市"
            v-model="city"
            :options="filter.cityFilters"
            class="city-drop"
          />
          <van-dropdown-item
            title="经验"
            v-model="experience"
            :options="filter.experienceFilters"
            class="experience-drop"
          />
          <van-dropdown-item
            title="待遇"
            class="order-drop"
            v-model="salary"
            :options="filter.salaryFilters"
          />
        </van-dropdown-menu>
      </div>
    </van-sticky>
    <!-- 底部列表 -->
    <div class="main-box">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-row
          type="flex"
          justify="space-between"
          class="monophthong"
          v-for="item in list"
          :key="item.id"
        >
          <van-col span="12" class="position" @click="article(item.id)">
            <div class="name">
              <span>{{ item.name }}</span>
            </div>
            <span class="choic">{{ item.city }}</span>
            <span class="choice">{{ item.experience }}</span>
            <span class="choices">{{ item.educatience }}</span>
          </van-col>
          <van-col class="positiones" span="8"
            ><span>{{ item.salary }}</span></van-col
          >
        </van-row>
      </van-list>
    </div>
  </div>
</template>

<script>
// 导入接口获取文章详情
import { companyPositions, positionFilters } from '@/api/company/company.js'
export default {
  name: 'company-position',
  data () {
    return {
      // 获取当前文章的id
      id: this.$route.query.id,
      // 分页数据
      limit: 5,
      start: 0,
      // 列表数据
      list: [],
      // 列表组件相关
      loading: false,
      finished: false,
      // 总页数
      total: 0,
      // 筛选的数组(结果)
      filter: {
        cityFilters: [],
        experienceFilters: [],
        salaryFilters: [],
        types: []
      },
      // 筛选条件
      experience: undefined,
      salary: undefined,
      city: undefined,
      type: undefined
    }
  },
  methods: {
    // 加载数据
    async onLoad () {
      // 开启加载动画
      this.loading = true
      // 获取数据
      const positionRes = await companyPositions({
        id: this.id,
        limit: this.limit,
        start: this.start,
        experience: this.experience,
        salary: this.salary,
        city: this.city,
        type: this.type
      })
      // 添加数据
      this.list.push(...positionRes.data.list)
      // 设置总数
      this.total = positionRes.data.total
      // 关闭loading
      this.loading = false
      // 累加索引
      this.start += this.limit
      if (this.start >= positionRes.data.total) {
        this.finished = true
      }
    },
    // 跳转到文章详情
    article (id) {
      // 动态路由传参
      this.$router.push(`/details/?id=${id}`)
      console.log(this.id)
    }
  },
  watch: {
    experience () {
      this.start = 0
      this.list = []
      this.finished = false
    },
    salary () {
      this.start = 0
      this.list = []
      this.finished = false
    },
    city () {
      this.start = 0
      this.list = []
      this.finished = false
    },
    type () {
      this.start = 0
      this.list = []
      this.finished = false
    }
  },
  async created () {
    const filterRes = await positionFilters(this.id)
    // 存储筛选的数据
    this.filter = filterRes.data
    // 组转换对象===城市
    this.filter.cityFilters = this.filter.cityFilters.map((v, i) => {
      return {
        value: v,
        text: v
      }
    })
    // 数组转换对象
    this.filter.experienceFilters = this.filter.experienceFilters.map(
      (v, i) => {
        return {
          // 键值对
          value: v,
          // 属性值
          text: v
        }
      }
    )
    // 数组转换对象
    this.filter.salaryFilters = this.filter.salaryFilters.map((v, i) => {
      return {
        // 键值对
        value: v,
        // 属性值
        text: v
      }
    })
    // 数组转换对象
    this.filter.types = this.filter.types.map((v, i) => {
      return {
        // 键值对
        value: v,
        // 属性值
        text: v
      }
    })
    // 将当前服务器返回的数据合并在一起
    for (const key in this.filter) {
      if (key !== 'types') {
        this.filter[key].unshift({
          value: undefined,
          text: '全部'
        })
      }
    }
  }
}
</script>

<style lang="less">
.company-position-container {
  .top-box {
    background-color: white;
    /deep/.van-nav-bar__left {
      padding-left: 0;
    }
    /deep/.van-nav-bar {
      background-color: #ca0131;
    }
    /deep/.van-icon-arrow-left::before {
      color: #fff;
      font-size: 22px;
      margin-left: 10px;
    }
    /deep/.van-nav-bar__title {
      color: #fff;
      font-size: 18px;
    }
    .iconbtn_nav_back {
      font-size: 44px;
    }
    .van-ellipsis {
      overflow: visible;
    }
    .custom-title {
      position: relative;
      .num {
        position: absolute;
        top: -5px;
        right: -15px;
        font-size: 12px;
        color: #fff;
      }
    }
    .scroll-wrap {
      width: 100%;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .content {
        padding: 15px;
        display: flex;
        .van-tag {
          padding: 6px 12px;
          flex-shrink: 0;
          margin-right: 10px;
          background: #f7f4f5;
          color: #545671;
        }
        .van-tag--primary {
          // transition: all .5s;
          // opacity: 1;
          background: #00b8d4;
          color: white;
        }
      }
    }
    // 下拉菜单
    .experience-drop,
    .order-drop {
      /deep/.van-cell__title {
        text-align: center;
      }
      /deep/.van-cell__value {
        position: absolute;
        right: 10px;
      }
    }
    .city-drop {
      .van-index-anchor {
        transform: translateY(-1px);
        font-size: 12px;
        color: #939393;
        background-color: #f7f4f5;
      }
    }
  }
  .monophthong {
    margin-left: 15px;
    margin-right: 15px;
    .position {
      margin-top: 20px;
      .name {
        width: 185px;
        span {
          font-size: 18px;
        }
      }
      .choic,
      .choice,
      .choices {
        font-size: 14px;
        background-color: #fbf4ef;
        color: #000;
        margin: 5px;
      }
    }
    .positiones {
      margin-top: 20px;
      span {
        font-size: 16px;
        color: red;
        margin-left: 40px;
      }
    }
  }
  .main-box {
    padding: 0 15px;
    background-color: white;
    margin-top: 2px;
  }
}
</style>
